import React, { useState, useRef } from 'react';
import { history, connect } from 'umi';
import { Card, Button, Form } from 'antd';
import { Col, Row, Tag, Tooltip, Space, notification } from 'antd';
import DrawerCondition from '@/components/DrawerCondition';
import FormCondition from '@/components/FormCondition';
import { useEffect } from 'react';
import uploadOss from '@/utils/aliOssUpload';
import { pay_type } from '@/common/contact'
import moment from 'moment'
const SetForm = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
  const { show = false, detail = {} } = visible;
  const { orderSn } = detail
  const [form] = Form.useForm();
  // 新增修改 传id修改 不传id新增
  const fetchRoleEdit = () => {
    form.validateFields().then(async (values) => {
      const { payTime,
        certificateImages } = values
      let img = await uploadOss(certificateImages);
      dispatch({
        type: 'order/fakeRechargeOrder',
        payload: {
          orderSn,
          ...values,
          certificateImages: img.toString(),
          payTime: payTime.format('YYYY-MM-DD HH:mm'),
        },
        callback: () => {
          handleCallback();
          onClose()
        }
      })
    })
  };
  console.log(detail)
  const modalProps = {
    title: `补费`,
    visible: show,
    onClose,
    width: 600,
    destroyOnClose: true,
    footer: (
      <Button type="primary" loading={loading} onClick={fetchRoleEdit}>
        确定
      </Button>
    ),
  };


  const formItems = [
    {
      label: '收据编号',
      name: 'receiptNo',
      rules: [{ required: false }],
    },
    {
      label: '收据图片',
      name: 'certificateImages',
      rules: [{ required: false }],
      type: 'upload'
    },
    {
      label: '订单备注',
      rules: [{ required: false }],
      name: 'remark',
    },
    {
      label: '补费金额',
      name: 'payFee',
      type: 'number',
    },
    {
      label: '支付方式',
      name: 'payType',
      type: 'select',
      select: pay_type,
    },
    {
      label: '支付时间',
      name: 'payTime',
      showTime: 'HH:mm',
      type: 'dataPicker',
      format: 'YYYY-MM-DD HH:mm',
    },
  ]


  return (
    <>
      <DrawerCondition {...modalProps}>
        <FormCondition form={form} formItems={formItems} initialValues={{}}></FormCondition>
      </DrawerCondition>

    </>
  );
};
export default connect(({ loading }) => ({
  loading: loading.effects['order/fakeRechargeOrder'],
}))(SetForm);
